<!--
 * @FileDescription 填空标签
 * @Author lz
 * @Date 20230131 17:20:54
 * @LastEditors lz
 * @LastEditTime 20230131 17:20:54
-->
<template>
    <div class="lab_Box">
        <div class="upperRight" v-if="props.Direction == 315">
            <div class="lineBox"></div>
            <img src="/images/origin.png" class="origin">
            <div class="box_upperRight" :id="`${props.Keys}`"
                :class="state.RAWT == 2 ? 'errs' : state.RAWT == 1 ? 'exa' : ''">
                <div class="tit">{{ props.Name?.split('_')[0] }}:</div>
                <!-- <div class="inp"><a-input v-model:value="state.value" /></div> -->
                <div class="inp"><a-input type="number" @blur="checkBox" v-model:value="state.value"/></div>
                <div class="tit">{{ props.Name?.split('_')[2] }}</div>
            </div>
            <!-- <img class="connection" src="/images/instructions_bg.png"> -->
        </div>

        <div class="lowerRight" v-if="props.Direction == 45">
            <div class="lineBox"></div>
            <img src="/images/origin.png" class="origin">
            <div class="box_lowerRight" :id="`${props.Keys}`"
                :class="state.RAWT == 2 ? 'errs' : state.RAWT == 1 ? 'exa' : ''">
                <div class="tit">{{ props.Name?.split('_')[0] }}：</div>
                <!-- <div class="inp"><a-input v-model:value="state.value" /></div> -->
                <div class="inp"><a-input type="number" @blur="checkBox" v-model:value="state.value"/></div>
                <div class="tit">{{ props.Name?.split('_')[2] }}</div>
            </div>
            <!-- <img class="connection_lowerRight" src="/images/lowerRight_lab.png"> -->
        </div>

        <div class="upperLeft" v-if="props.Direction == 225">
            <div class="lineBox"></div>
            <img src="/images/origin.png" class="origin">
            <div class="box_upperLeft" :id="`${props.Keys}`"
                :class="state.RAWT == 2 ? 'errs' : state.RAWT == 1 ? 'exa' : ''">
                <div class="tit">{{ props.Name?.split('_')[0] }}：</div>
                <!-- <div class="inp"><a-input v-model:value="state.value" /></div> -->
                <div class="inp"><a-input type="number" @blur="checkBox" v-model:value="state.value"/></div>
                <div class="tit">{{ props.Name?.split('_')[2] }}</div>
            </div>
            <!-- <img class="connection_upperLeft" src="/images/upperLeft_lab.png"> -->
        </div>

        <div class="lowerLeft" v-if="props.Direction == 135">
            <div class="lineBox"></div>
            <img src="/images/origin.png" class="origin">
            <div class="box_lowerLeft" :id="`${props.Keys}`"
                :class="state.RAWT == 2 ? 'errs' : state.RAWT == 1 ? 'exa' : ''">
                <div class="tit">{{ props.Name?.split('_')[0] }}：</div>
                <!-- <div class="inp"><a-input v-model:value="state.value" /></div> -->
                <div class="inp"><a-input type="number" @blur="checkBox" v-model:value="state.value"/></div>
                <div class="tit">{{ props.Name?.split('_')[2] }}</div>
            </div>
            <!-- <img class="connection_lowerLeft" src="/images/instructions_bg.png"> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, computed, watch } from 'vue'
import HomeContent from '../../HomeContent';
import simulationData from '../simulationTraining';

// interface Props {
//     information: ClientMessage.LabelInformation;
//     index: number
// }

interface Emits {
    (event: 'verify', value: boolean, index: number, content: any): void;
    // (event: 'verify', value: boolean, index: number, content: number): void;
}

// const props = defineProps<Props>()
// const { information, index } = reactive(toRefs(props))
const emits = defineEmits<Emits>()

// const ViewportLeft = computed(() => props.ViewportPointX + '%')
// const ViewportTop = computed(() => props.ViewportPointY + '%')
const props = defineProps({
    Direction: Number,
    ViewportPointX: String,
    ViewportPointY: String,
    Name: String,
    Length: Number,
    Keys: Number,
    indexs: {
        type: Number,
        default: () => 0
    },
})
const state = reactive({
    RightAndWrong: false,
    value: '',
    // value: 0,
    constant1: 0,
    constant2: 0,
    constant3: 0,
    constant4: 0,
    H_constant4: 0,
    RAWT: 0,
});

//线长
let LinLength: string = `${props.Length}px`
//方向
let direction: string = `rotate(${props.Direction}deg) `



//左下X
let LLX = ref(`-${state.constant1 + (props.Length! * 0.7071)}px`)
//左下Y
let LLY: string = `${(props.Length! * 0.7071) + 8}px`
watch(() => state.constant1, (newVal, oldVal) => {
    if (newVal != oldVal) {
        LLX.value = `-${state.constant1 + (props.Length! * 0.7071) - 28}px`
    }
})


//225X
let LRX = ref(`-${(props.Length! * 0.7071)}px`)
//225Y
let LRY = ref(`-${(props.Length! * 0.7071)}px`)
watch(() => state.constant4, (newVal, oldVal) => {
    if (newVal != oldVal) {
        LRX.value = `-${state.constant4 + (props.Length! * 0.7071) - 28}px`
        LRY.value = `-${(props.Length! * 0.7071) + 34}px`
    }
})


//315X
let URX: string = `${4 + (props.Length! * 0.7071)}px`
//315Y
let URY: string = `-${32 + (props.Length! * 0.7071)}px`
//45X
let ULX: string = `${3 + (props.Length! * 0.7071)}px`
//45Y
let ULY: string = `${3 + (props.Length! * 0.7071)}px`
// let emigFun = defineEmits(["handLer"])

//@ts-ignore
function handleInput() {
    return state.value.replace(/\D/g,'')
}

// // 校验答案
function checkBox(val: number) {
    state.RAWT = 0
    // console.log(val, HomeContent.Default.ApplicationType.value);

    if (val == 0 && HomeContent.Default.ApplicationType.value != '考核') {
        if (state.value == props.Name?.split('_')[1]) {
            // if (state.value == Number(props.Name?.split('_')[1])) {
            // emigFun("handLer", true)
            state.RAWT = 1
            emits('verify', true, props.indexs as number, state.value)
        } else {
            state.RAWT = 2
            emits('verify', false, props.indexs as number, state.value)
            // emigFun("handLer", false) 
        }
    } else {
        if (state.value == props.Name?.split('_')[1]) {
            // if (state.value == Number(props.Name?.split('_')[1])) {
            // emigFun("handLer", true)
            emits('verify', true, props.indexs as number, state.value)
        } else {
            emits('verify', false, props.indexs as number, state.value)
            // emigFun("handLer", false) 
        }
    }

}
// defineExpose({ checkBox })
let Echo: any = []
onMounted(() => {
    if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
        Echo = simulationData.Default.historyList.get(simulationData.Default.subscript.value)
        state.value = Echo[props.indexs].Name
    }

    if (props.Direction == 135) {
        let divW = document.getElementById(`${props.Keys}`);
        state.constant1 = divW!.offsetWidth
        // console.log(state.constant1);
    }
    if (props.Direction == 315) {
        let divW2 = document.getElementById(`${props.Keys}`);
        // console.log(divW2!.offsetWidth);
        state.constant2 = divW2!.offsetWidth
    }
    if (props.Direction == 45) {
        let divW3 = document.getElementById(`${props.Keys}`);
        // console.log(divW3!.offsetWidth);
        state.constant3 = divW3!.offsetWidth
    }
    if (props.Direction == 225) {
        let divW4 = document.getElementById(`${props.Keys}`);
        // console.log(divW4!.offsetWidth);
        state.constant4 = divW4!.offsetWidth
        state.H_constant4 = divW4!.offsetHeight
    }
});

//监听提交
watch(() => simulationData.Default.TriggerValue.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
            checkBox(1)
        } else {
            checkBox(0)
        }
    }
    console.log('state.value=-=-=-\-=-\-=\-=-\=-\=-=', state.value, props.Name, typeof (props.Name));

})


</script>

<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
input[type="number"] {  
  -moz-appearance: textfield;
  appearance: textfield;
}

.lab_Box {
    position: absolute;
    left: v-bind(ViewportPointX);
    top: v-bind(ViewportPointY);
    transform: translate(-17px, -17px);
    z-index: 999;
}


.box_upperRight {
    position: absolute;
    left: v-bind(URX);
    top: v-bind(URY);
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/images/label_bg.png');
    border-image-slice: 27 fill;
    display: flex;
    align-items: center;
}

.box_lowerRight {
    position: absolute;
    left: v-bind(ULX);
    top: v-bind(ULY);
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/images/label_bg.png');
    border-image-slice: 27 fill;
    display: flex;
    align-items: center;
}

.box_upperLeft {
    position: absolute;
    left: v-bind(LRX);
    top: v-bind(LRY);
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/images/label_bg.png');
    border-image-slice: 27 fill;
    align-items: center;
    display: flex;
}

.box_lowerLeft {
    position: absolute;
    left: v-bind(LLX);
    top: v-bind(LLY);
    height: 60px;
    border: 24px solid;
    padding: 1px;
    border-image-source: url('/images/label_bg.png');
    border-image-slice: 27 fill;
    align-items: center;
    display: flex;
}

.tit {
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    float: left;
    white-space: nowrap;
}

.inp {
    float: left;
    width: 60px;
}

:deep().ant-input {
    height: 30px;
    background-color: transparent;
    border: none;
    color: #fff;
    text-align: center;
}

/* .connection {
    position: absolute;
    left: 10px;
    top: -14px;
    width: 224px;
}

.connection_lowerRight {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 224px;
}

.connection_upperLeft {
    position: absolute;
    left: -206px;
    top: -14px;
    width: 224px;
}

.connection_lowerLeft {
    position: absolute;
    left: -206px;
    top: 12px;
    width: 224px;
    transform: rotate(180deg);
} */

.origin {
    width: 34px;
}

.lineBox {
    position: absolute;
    top: 16px;
    left: 16px;
    width: v-bind(LinLength);
    height: 1px;
    background-color: #2AE9FF;
    transform: v-bind(direction);
    transform-origin: 0% 50%;
}

.errs {
    border-radius: 10px;
    box-shadow: 0px 0px 20px 6px red;
}

.exa {
    border-radius: 10px;
    box-shadow: 0px 0px 20px 6px rgb(91, 255, 91);
}
</style>